<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

<xi:include href="master.html" />
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>Photo filter</title>
    <style type="text/css">
        #photos{clear:both;overflow:hidden;padding:5px;}
        .photo{margin:2px;vertical-align:top;width:70%;clear:both;}
        .photo td{text-align:left;}
        .photo img{cursor:pointer;}
        .page{clear:both;}
        .tip{font-size:15px; color:red;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
        function deletephoto(id){
            new Request.JSON({url:'deletephoto',onSuccess:function(r){
                $('p'+id).destroy();
            }}).get({'id':id});
        }
        
    //]]>
    </script>
</head>
<?python
  # define mock menus as list of (title, url, is_active) tuples
  menu_top = [
    ('Home','/',False),
    ('Faces','/photofilter', True),
    ('ANN','/anntrainer', False),
    ('SVM','/svmtrainer', False)
  ]
  menu_side = [
    ('Official Website', 'http://www.turbogears.org'),
    ('Documentation', 'http://docs.turbogears.org'),
    ('Bugs & Suggestions', 'http://trac.turbogears.org'),
    ('Mailing List', 'http://groups.google.com/group/turbogears'),
  ]
?>
<body>
    <h1>Faces</h1>
    <form id="crawlform" method="post" action="photocrawler" style="border-bottom:solid 2px #ccc">
        Input the number of photos you want to crawl:
        <input type="text" name="amount"/>
        <input type="submit" value="Crawl!"/>
    </form>
    Show <a py:if="showall" href="photofilter?showall=0">unfiltered</a><span py:if="not showall">unfiltered</span> | <a py:if="not showall" href="photofilter">all</a><span py:if="showall">all</span>
    <div class='page' py:if="tg.paginate.page_count != 0">
        <span py:if="tg.paginate.page_count != 1">
        <b><a py:if="tg.paginate.current_page>2 and tg.paginate.page_count>3" href="${tg.paginate.href_first}">&laquo; First</a></b>
        <b><a py:if="tg.paginate.current_page!=1" href="${tg.paginate.href_prev}">&lt; Previous</a></b>
        <b>Page ${tg.paginate.current_page} of ${tg.paginate.page_count}</b>
        <b><a py:if="tg.paginate.current_page!=tg.paginate.page_count" href="${tg.paginate.href_next}">Next &gt;</a></b>
        <b><a py:if="tg.paginate.page_count-1>tg.paginate.current_page and tg.paginate.page_count>3" href="${tg.paginate.href_last}">Last &raquo;</a></b>
        </span>
    </div>
    <h1 class="tip">To remove a photo, click it.</h1>
    <h1 class="tip" py:if="running">Crawler is running ( ${progress} ). 
        To see new photos, click <input type="button" onclick="document.location='photofilter?showall=${showall}'" value="Refresh"/></h1>
    <div id="photos">
        <form method="post" action="markasfiltered">
        <table py:for="p in photos" class="photo" id="p${p.id}">
            <tr>
                <td><input type="checkbox" checked="checked" name="pid" value="${p.id}"/></td>
                <td onclick="deletephoto(${p.id})"><img src="getpic?id=${p.id}" width="200"/></td>
                <td onclick="deletephoto(${p.id})"><img src="getroi?id=${p.id}" /></td>
                <td><h3>${p.score}</h3></td>
            </tr>
        </table>
        <input type="submit" value="Mark all as filtered"/>
        </form>
    </div>
    <div class='page' py:if="tg.paginate.page_count != 0">
        <span py:if="tg.paginate.page_count != 1">
        <b><a py:if="tg.paginate.current_page>2 and tg.paginate.page_count>3" href="${tg.paginate.href_first}">&laquo; First</a></b>
        <b><a py:if="tg.paginate.current_page!=1" href="${tg.paginate.href_prev}">&lt; Previous</a></b>
        <b>Page ${tg.paginate.current_page} of ${tg.paginate.page_count}</b>
        <b><a py:if="tg.paginate.current_page!=tg.paginate.page_count" href="${tg.paginate.href_next}">Next &gt;</a></b>
        <b><a py:if="tg.paginate.page_count-1>tg.paginate.current_page and tg.paginate.page_count>3" href="${tg.paginate.href_last}">Last &raquo;</a></b>
        </span>
    </div>
</body>
</html>
